<template>
  <div>
    <!-- 搜索栏 -->
    <div class="search-box" v-if="table.hasSearch">
      <slot name="searchBox"></slot>
    </div>

    <!-- 表格 -->
    <div class="table-box">
      <el-table
          v-loading="table.loading"
          :show-summary="table.hasShowSummary"
          :summary-method="table.getSummaries"
          ref="ELTable"
          :id="exportId"
          :data="tableData"
          tooltip-effect="dark"
          :border="table.border"
          style="width: 100%"
          row-key="id"
          default-expand-all
          header-row-class-name="thClassName"
          :row-class-name="tableRowClassName"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          @selection-change="handleSelectionChange"
          @row-click="rowClick">
        <!-- 选择框 -->
        <el-table-column
          v-if="table.hasSelect"
          type="selection"
          :selectable="checkSelectable"
          width="80">
        </el-table-column>

        <el-table-column
          v-if="table.hasIndex"
          type="index"
          width="80"
          label="序号">
        </el-table-column>

        <!-- 无数据-->
        <template slot="empty">
          <span class="no-data">
            <img src="../../assets/nodata.png">
            <span>暂无数据</span>
          </span>
        </template>

        <template v-for="item in table.tr">
          <el-table-column
            v-if="item.show !== false && item.show === 'template'"
            :label="item.label"
            :class-name="item.className ? item.className : ''"
            :key="item.id"
            :show-overflow-tooltip="true"
            :width="item.width ? item.width : ''"
            :min-width="item.minWidth ? item.minWidth : ''" >
            <template slot-scope="scope">
              <slot :name="item.prop" :obj="scope"></slot>
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="item.show !== false && item.show !== 'template'"
            :label="item.label"
            :prop="item.prop"
            :show-overflow-tooltip="true"
            :class-name="item.className ? item.className : ''"
            :key="item.id"
            :width="item.width ? item.width : ''"
            :min-width="item.minWidth ? item.minWidth : ''" >
          </el-table-column>
        </template>

        <!-- 操作 -->
        <el-table-column
          column-key="operation"
          :label="table.operation.label"
          :width="table.operation.width ? table.operation.width : ''"
          :min-width="table.operation.minWidth ? table.operation.minWidth : ''"
          :class-name="table.operation.className"
          v-if="table.hasOperation">
          <template slot-scope="scope">
            <el-button
              v-for="item in table.operation.data"
              :class="item.classname ? item.classname : ''"
              :key="item.id"
              :type="item.type"
              :icon="item.icon"
              :size="item.size"
              @click.stop="handleOperation(scope.$index, scope.row, item.id)">{{ item.label }}</el-button>
          </template>
        </el-table-column>

      </el-table>

    </div>

    <div class="buttom-btn">
      <slot name="footerBtn"></slot>
    </div>

    <!-- 分页 -->
    <pagination v-if="showPage && table.hasPage" :pageBean="pageBean" @size-change="handleSizeChange" @current-change="handleCurrentChange" :pagerCount="pagerCount" :isShowTotal="isShowTotal" :hasJump="hasJump"></pagination>
    
  </div>
</template>

<script>
import pagination from './pagination.vue';
import {Checkbox, Table, TableColumn} from 'element-ui';
import {PageBean} from '../../utils/page-bean';
export default {
  components: { 
    pagination,
    'el-table': Table,
    'el-table-column': TableColumn,
    'el-checkbox': Checkbox,
  },
  data(){
    return{
      // 是否显示分页
      showPage: null,
      // 翻页时需要记住所选id
      selectedData: [],
    }
  },
  props: {
    // 表格配置及数据
    table: {
      type: Object,
      default() {
        return {
          hasMergeRowOrColumn: false, // 是否合并单元格
          loading: false,          // 加载中动画
          hasShowSummary: false,   // 是否显示表位合计行
          hasIndex:true,           // 是否显示序号
          border: false,           // 是否带有纵向边框，默认为false
          hasSelect: false,        // 有无选中功能
          hasOperation: false,     // 有无操作功能
          hasSearch:false,         // 有无搜索
          hasPage:true,            // 是否显示分页
          tr: [                    // 表头数据 —— className:列的class名
            {
              id: '1',
              label: 'label',
              prop: 'prop',
              className: 'classname',
              minWidth: '80',
              show: true           // show有三种值：false隐藏当前列，true常规表格列，template自定义表格列
//          <template slot-scope="props" slot="example">
//                <a class="list-a" target="_blank" :href="'/#/bombscreen?mobile=' + props.obj.row.mobile">{{ props.obj.row.username }}</a>
//          </template>
            }
          ],
          operation: {             // 操作功能
            label: '操作',                // 操作列的行首文字
            width: '200',                // 操作列的宽度
            className: '',               // 操作列的class名
            data: [                      // 操作列数据
              {
                label: '通过',                // 按钮文字
                Fun: 'handleSubmit',         // 点击按钮后触发的父组件事件
                size: 'mini',                // 按钮大小
                id: '1',                     // 按钮循环组件的key值
                classname: 'show'            // 按钮的类名
              }
            ]
          },
          getSummaries(param) {               // 自定义表位合计行数据
            // *** 此函数传入param参数
            console.log(param);
            // *** 最后返回一个数组，合计行会显示数组中的内容
            return []
          }
        }
      }
    },
    // 表格数据
    tableData: Array,
    // 分页
    pageBean: {
      type: Object,
      default: function () {
        return new PageBean();
      }
    },
    pagerCount:{
      type:Number,
      default:7
    },
    isShowTotal:{
      type:Boolean,
      default:true
    },
    hasJump:{
      type:Boolean,
      default:true
    },
    tableRowClassName:{
      type:Function,
      default:function({row, rowIndex}) {
        row.row_index = rowIndex;
      },
    },
    filterData:{
      type: Object,
      default:()=>{}
    },
    //需要导出
    hasExport:{
      type:Boolean,
      default:false
    },
    exportName:{
      type:String,
      default:''
    },
    exportId:{
      type:String,
      default:''
    }
  },
  watch: {
    // 无数据和只有一页的时候不显示分页
    tableData(val){
      if (this.pageBean.lastIndex === 1) {
        this.showPage = false;
      }else{
        this.showPage = !!val.length;
      }
      if(val){
        this.$nextTick(() => {
          this.$refs.ELTable.doLayout();
        })
      }
    }
  },
  methods:{
    // tableRowClassName({row, rowIndex}) {
    //   row.row_index = rowIndex;
    // },
    checkSelectable(row){
      return !row.disabled
    },
    /**
     * 每页显示多少条变化事件
     */
    handleSizeChange(event) {
      this.pageBean.pageSize = event;
      this.$emit('pageChange', this.pageBean);
    },
    /**
     * 页码变化
     */
    handleCurrentChange(event) {
      this.pageBean.pageIndex = event;
      this.$emit('pageChange', this.pageBean);
    },
    /**
     * 选中的数据
     */
    handleSelectionChange(data) {
      this.selectedData = data;
      this.$emit('handleSelectionChange', data);
    },
    // 点击某一行时触发的函数
    rowClick(Row, Event, Column) {
      if (!Column || Column.type === 'selection' || Column.columnKey === 'operation' || Column.type === 'expand') {
        return
      }
      const data = {
        row: Row,
        event: Event,
        column: Column
      };
      this.$emit('onRowClick', data)
    },
    /**
     * 按钮事件
     */
    handleOperation(a, b, id) {
      const data = this.table.operation.data;
      for (let i = 0; i < data.length; i++) {
        if (id === data[i].id) {
          this.$emit(data[i].Fun, a, b,id);
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.search-box{
  padding:0 0 20px;
}
::v-deep .el-table__header{
  height: 50px;
  font-size: 15px;
  font-weight: bold;
  color: #666;
  th{
    background: #023164;
    color: #159AFF;
    height: 50px;
  }
  th.is-leaf{
    border: none;
  }
}
::v-deep .el-table, .el-table__expanded-cell {
    background-color: transparent;
}
::v-deep .el-table tbody tr:hover > td {
      background-color: transparent;
 }
::v-deep .el-table__body{
    tr{
        background-color: rgba(255, 0, 0, 0);
    }
    th{
        height: 50px;
        border:none !important;
        color: #ffffff;
    }
}

::v-deep .el-table{
  .cell{
    padding:0 10px !important;
    color: #D0DEEE;
  }
  tr{
    th:first-child,td:first-child{
      padding-left:15px;
    }
    th:last-child,td:last-child{
      padding-right:15px;
    }
  }
  .hidden-row{
    display: none;
  }
}

::v-dee .el-table th.gutter{ 
  display: table-cell !important; 
}
.no-data{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
  img{
    width: 120px;
  }
  span{
    color: #bbb;
    line-height: 40px;
  }
}
.export-btn{
  margin-top: 10px;
}
</style>